// @flow
import * as React from 'react';
import {ToDo} from "../ToDoList";

type Props = {
    toDo: ToDo,
    updateToDo: any,
    deleteToDo: any
};


export class Item extends React.Component<Props> {

    constructor(props:Props) {
        super(props);
    }
    state = {
        mouse: false
    }
    handleMouse = (flag: boolean) => {
        return (event: any) => {
            this.setState({mouse: flag})
        }
    }


    render() {
        let {toDo, updateToDo, deleteToDo} = this.props;
        let {mouse} = this.state;
        return (
            <li style={{backgroundColor: mouse ? '#ddd' : 'white'}} onMouseEnter={this.handleMouse(true)}
                onMouseLeave={this.handleMouse(false)}>
                <input onChange={(e: any) => {
                    updateToDo(toDo.id, e.target.checked)
                }}
                       type={"checkbox"} checked={toDo.isChecked}/>{toDo.text}
                <button onClick={(e: any) => {
                    deleteToDo(toDo.id)
                }} style={{display: mouse ? 'block' : 'none'}}>删除
                </button>
            </li>
        );
    };
};